.c-relative {
	position: relative;
}

.c-absolute {
	position: absolute;
}

.c-content {
	color: #333;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.c-bg-fff {
	background-color: #fff;
}

.c-bg-fff-90 {
	background-color: rgba(255, 255, 255, .9);
}

.c-bg-ededed {
	background-color: #ededed;
}

.c-bg-2d2d2d {
	background-color: #2d2d2d;
}

.c-bg-f2f2f2 {
	background-color: #f2f2f2;
}

.c-bg-f5f5f5 {
	background-color: #f5f5f5;
}

.c-bg-f7f7f7 {
	background-color: #f7f7f7;
}

.c-bg-fcfcfc {
	background-color: #fcfcfc;
}

.c-bg-eee {
	background-color: #ddd;
}

.c-bg-211a3a {
	background-color: #211a3a;
}

.c-purple {
	color: #a6a9b0;
}

.c-theme {
	color: #FCDE00;
}

.c-8d8d8d {
	color: #8d8d8d;
}

@for $i from 10 through 90 {
	@if $i % 10==0 {
		.c-fff-#{$i} {
			color: rgba(255, 255, 255, $i / 100)
		}
	}
}

.c-fff {
	color: #fff;
}

.c-333 {
	color: $color-text;
}

.c-666 {
	color: $color-sub-text;
}

.c-999 {
	color: #999;
}

.c-ccc {
	color: #ccc;
}

.c-blue {
	color: #3265ff !important;
}


.c-f00 {
	color: #ff0000;
}

// 字体对齐方式
.c-tl {
	text-align: left;
}

.c-tc {
	text-align: center;
}

.c-tr {
	text-align: right;
}

.c-bold {
	font-weight: bold;
}

@for $i from 14 through 80 {
	@if $i % 2==0 {
		.c-fs-#{$i} {
			font-size: #{$i}px;
		}
	}
}

// 基础颜色

.c-placeholder {
	color: $color-placeholder;
}

.c-disable {
	color: $color-disable;
}

// 通过基础的 12 分栏，迅速简便地创建布局
.c-row {
	padding: 6px;
	@include flex(row);
	flex-wrap: wrap;
}

// 圆角
.c-radius-sm {
	border-radius: $border-radius-sm;
	overflow: hidden;
}

.c-radius,
.c-radius-base {
	border-radius: $border-radius-base;
	overflow: hidden;
}

.c-radius-lg {
	border-radius: $border-radius-lg;
	overflow: hidden;
}

.c-radius-circle {
	$border-radius-circle: 50%;
	overflow: hidden;
}

// 旋转动画
@keyframes c-icon-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/*
  字体换行
*/
.c-ellipsis,
.c-ellipsis-1 {
	@include ellipsis();
}

.c-ellipsis-2 {
	@include ellipsis(2);
}

.c-ellipsis-3 {
	@include ellipsis(3);
}

.c-flex {
	@include flex(row);
}

.c-flex-column {
	@include flex(column);
}

.c-flex-wrap {
	flex-wrap: wrap;
}

.c-reverse {
	flex-direction: row-reverse;
}

.c-column-reverse {
	flex-direction: column-reverse;
}

.c-justify-between {
	justify-content: space-between;
}

.c-justify-start {
	justify-content: flex-start;
}

.c-justify-around {
	justify-content: space-around;
}

.c-justify-end {
	justify-content: flex-end;
}

.c-align-center {
	align-items: center;
}

.c-align-start {
	align-items: flex-start;
}

.c-align-end {
	align-items: flex-end;
}

.c-justify-center {
	justify-content: center;
}

.c-align-self-start {
	align-self: flex-start;
}

.c-align-self-end {
	align-self: flex-end;
}

.c-align-self-center {
	align-self: center;
}

.c-justify-self-start {
	justify-self: start;
}

.c-justify-self-center {
	justify-self: center;
}

.c-justify-self-end {
	justify-self: end;
}

.c-justify-flex-start {
	justify-content: flex-start;
}

.c-shrink-0 {
	flex-shrink: 0;
}

/* #endif*/

.c-flex-ajcenter {
	@extend .c-flex;
	@extend .c-align-center;
	@extend .c-justify-center;
}

.c-flex-column-ajcenter {
	@extend .c-flex-column;
	@extend .c-align-center;
	@extend .c-justify-center;
}

@for $i from 1 through 12 {
	// .c-col-#{$i} {
	//     flex: 0 0 calc(#{100 * $i + "%"} / 20);
	//     min-width: 0;
	// }

	@if $i <=6 {
		.c-flex-#{$i} {
			flex: #{$i};
			//min-width: 0;
		}

		.c-flex-column {

			&>.c-flex-#{$i},
			&>.c-col-#{$i} {
				// min-width: auto;
				// min-height: 0;
			}
		}
	}
}


// 旋转动画
@keyframes c-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/*
	下划线
*/
.c-underline,
.c-underline__top,
.c-underline__left,
.c-underline__right {
	position: relative;
}

.c-underline::after,
.c-underline__top::after {
	content: "";
	@include abs(null, 0, 0, 0);
	z-index: 2;
	height: 1px;
	transform: scaleY(0.5);
	background-color: #ececec;
}


.c-underline__top:after {
	top: 0;
	bottom: auto;
}

.c-underline__left::after,
.c-underline__right::after {
	content: "";
	@include abs(0, null, 0, 0);
	z-index: 2;
	width: 1px;
	height: 100%;
	transform: scaleX(0.5);
	background-color: #ececec;
}

.c-underline__right::after {
	@include abs(0, 0, 0, auto);
}

/* #endif */
// 定义内外边距，历遍1-80
@for $i from 0 through 100 {

	// 只要能被2或者4除尽的数
	@if $i % 2==0 or $i % 4==0 {
		.c-hr-#{$i} {
			height: $i + px;
		}

		.c-p-#{$i} {
			padding: $i + px;
		}

		.c-m-#{$i} {
			margin: $i + px;
		}

		.c-mb-#{$i} {
			margin-bottom: $i + px;
		}

		.c-plr-#{$i} {
			padding-left: $i + px;
			padding-right: $i + px;
		}

		.c-mlr-#{$i} {
			margin-left: $i + px;
			margin-right: $i + px;
		}

		.c-ptb-#{$i} {
			padding-top: $i + px !important;
			padding-bottom: $i + px !important;
		}

		@each $key,
		$value in l left,
		t top,
		r right,
		b bottom {

			// 缩写版，结果如： ml30
			.c-m#{$key}-#{$i} {
				margin-#{$value}: $i + px !important;
			}

			.c-p#{$key}-#{$i} {
				padding-#{$value}: $i + px;
			}
		}
	}
}

.c-h-40 {
	height: 40px;
}

.c-h-88 {
	height: 88px;
}

.c-h-100 {
	height: 100px;
}

.c-h-350 {
	height: 350px;
}

.c-h-375 {
	height: 375px;
}

.c-h-500 {
	height: 500px;
}

.c-h-550 {
	height: 550px;
}

.c-h-1000 {
	height: 1000px;
}

.title {
	line-height: 1.5;
}


@for $i from 0 through 200 {
	@if $i % 4==0 {
		.c-s-#{$i} {
			width: #{$i}px;
			height: #{$i}px;
		}
	}
}

@for $i from 0 through 200 {
	@if $i % 5==0 {
		.c-w-#{$i} {
			width: #{$i}px;
			height: #{$i}px;
		}
	}
}

@for $i from 0 through 200 {
	@if $i % 2==0 {
		.c-wt-#{$i} {
			width: #{$i}px;
			height: #{$i}px;
		}
	}
}

@for $i from 0 through 750 {
	@if $i % 5==0 {
		.c-wd-#{$i} {
			width: #{$i}px;
		}
	}
}

.c-pic-wrap {
	background: rgba(255, 255, 255, .05);
	@include radius(10px);
	width: 100px;
	height: 100px;
}


.c-btn-bor {
	border-width: 1px;
	border-style: solid;
	border-color: #ddd;
	padding: 12px 42px;
	@include radius(50px);
}

.c-btn-theme {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	background-color: $theme;
	padding: 12px 42px;
	@include radius(50px);
}